<style lang='scss'>
	.header {
		user-select: none;
		line-height: 56px;
		display: flex;
		flex-shrink: 0;
		padding-left: 1.6%;
		padding-right: 1%;
		span.menu-item {
			padding: 0 1.2%;
		}
		.logo {
			cursor: pointer;
		}
		.hd-menus {
			flex-grow: 1;
			text-align: right;
			background-color: inherit;
			.menu-item {
				cursor: pointer;
				background-color: inherit;
				font-size: 60%;
				position: relative;
				display: inline-block;
				box-sizing: content-box;
				
				.dropdown-div {
					z-index: 666;
					border-radius: 4px;
					position: absolute;
					background-color: inherit;
			    left: 0;
			    border-top: 1px solid #f1f5fd;
			    width: 100%;
			    padding: 0 12px;
			    margin-left: -23px;
			    text-align: center;
			    .submenu-item {
			    	line-height: 20px;
    				margin: 10px 0;
			    }
				}
			}
		}
	}
</style>
<template>
	<div class="header" :style="`background-color:${site_theme.titleBarBg};color:${site_theme.titleBarColor};`">
		<div class="logo" @click="menuItemCheck('scan_record')">{{site_title?site_title:'默认网站标题'}}</div>
		<div class="hd-menus" v-if="route_name && route_name != 'login'">
			<span class="menu-item" @mouseover="menuHover('user')" @touchstart="triggerHover('user')" @mouseout="menuOut">
				<span :style="hover_menu=='user'?'color:'+site_theme.titleBarHover:''">{{user_name}}<span style="padding: 0 12px;">▼</span></span>
				<div class="dropdown-div" v-show="hover_menu=='user'">
					<Submenu v-show="route_name != 'personal'" router_name='personal' :hover_color="site_theme.titleBarHover" @submenuClick="menuItemCheck()">个人信息</Submenu>
					<Submenu v-show="route_name != 'scan_record'" router_name='scan_record' :hover_color="site_theme.titleBarHover" @submenuClick="menuItemCheck()">数据查询</Submenu>
					<Submenu :hover_color="site_theme.titleBarHover" @submenuClick="menuItemCheck('logout')">登出</Submenu>
				</div>
			</span>
		</div>
	</div>
</template>
<script>
	import Submenu from 'components/sub_menu.vue';
	export default {
		data() {
			return {
				hover_menu: '',
				is_touch: false
			}
		},
		computed:{
			site_title() {
				let site_title = this.$store.getters.site_info.siteTitle;
				document.title = site_title;
				return site_title;
			},
			site_theme() {
				return this.$store.getters.theme_config;
			},
			user_name() {
				return this.$store.state.userInfo.id_num;
			},
			route_name() {
				let neme = this.$route.name;
				if(neme && neme != 'login') {
					this.$store.dispatch('loadUserInfo');
				}
				return this.$route.name;
			}
		},
		methods: {
			triggerHover(menu_name) {
				this.is_touch = true;
				if(this.hover_menu != menu_name) {
					this.hover_menu = menu_name;
				}else {
					this.hover_menu = '';
				}
			},
			menuHover(menu_name) {
				if(!this.is_touch && this.hover_menu != menu_name) {
					this.hover_menu = menu_name;
				}
			},
			menuOut() {
				if(!this.is_touch) {
					this.hover_menu = '';
				} 
			},
			menuItemCheck(menu_value) {
				if(menu_value) {
					this.hover_menu = '';
					if(menu_value == 'logout') {
						this.$axios.get('/user/logout').then(res => {
							if(res.s == 1) {
								this.$router.push({name:'login'});
							}
						})
					}else {
						this.$router.push({name:menu_value});
					}
				}
			}
		},
		components: {
			Submenu
		}
	}
</script>